<template>
  <div class="call-type-list">
    <el-button
      v-for="call in calltypeList"
      @click="handleActive(call)"
      :disabled="call.id === selectedCall"
      :class="{ active: call.id === selectedCall }"
    >
      {{ call.callTypeName }}
    </el-button>
  </div>
</template>

<script setup>
const emit = defineEmits(["selectCall"]);
const props = defineProps({
  calltypeList: {
    type: Array,
    default: () => [
      {
        callTypeName: "停机呼叫",
        id: 0,
      },
      {
        callTypeName: "缺料呼叫",
        id: 1,
      },
      {
        callTypeName: "完工呼叫",
        id: 2,
      },
      {
        callTypeName: "其他",
        id: 3,
      },
    ],
  },
  calltypeId:{
    type:String,
    default:""
  }
});
watch(()=>props.calltypeId, (newVal) => {
  if(newVal===""){
    selectedCall.value = null;
    return;
  }
});
const selectedCall = ref();
const handleActive = (call) => {
  selectedCall.value = call.id;
  emit("selectCall", selectedCall.value);
};
</script>

<style scoped lang="scss">
.call-type-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  .active {
    border: 1px solid #000a7b;
    color: #000a7b;
  }
}
:deep(.el-button){
  margin-left:0;
}
</style>
